<template>
    <div class="news">
    <ul>
        <!-- 导航区 -->
        <li v-for="i in newList" :key="i.id">
            <RouterLink to="/News/Detail">{{ i.title }}</RouterLink>
        </li>
    </ul>
    <!-- 内容区 -->
    <div class="news-content">
        <RouterView/>
    </div>
    </div>
</template>
<script lang="ts" setup name="News">
import { ref } from 'vue';
import { RouterLink, RouterView } from 'vue-router';


const newList = ref([
    {
        id: "sdsadasd1",
        title: "GG",
        content: "XXXXXXXX"
    }
    , {
        id: "sdsadasd2",
        title: "GS",
        content: "XXXXXXXX"
    }
    , {
        id: "sdsadasd3",
        title: "GD",
        content: "XXXXXXXX"
    }
])
</script>
<style>
/* 新闻 */
.news {
    /* 内边距上下0,左右20px */
    padding: 0 20px;
    display: flex;
    /* 用于设置容器中子元素的水平对齐方 */
    justify-content: space-between;
    height: 100%;
}

.news ul {
    margin-top: 30px;
    /* 于取消列表项前的标记（如圆点、数字等 */
    list-style: none;
    padding-left: 10px;
}

.news li>a {
    font-size: 18px;
    line-height: 40px;
    text-decoration: none;
    color: #64967E;
    text-shadow: 0 0 1px rgb(0, 84, 0);
}

.news-content {
    width: 70%;
    height: 90%;
    border: 1px solid;
    margin-top: 20px;
    border-radius: 10px;
}
</style>


